<template>
  <div id="q-code-page" class="q-code-box">
    <mobileNavbar :name="$t('message.mobile.shareQrCoode')" :showBottomBorder="true" @back="handleBack"></mobileNavbar>
    <div class="content-box" id="html2canvas">
      <div class="file-name-info">
        <div class="file-icon">
          <filePng class="icon" :type="currentItem.type" :nameSuffix="currentItem.nameSuffix"></filePng>
        </div>
        <div class="info">
          <div class="title">{{currentItem.name || currentItem.dcName}}</div>
          <div class="tips">{{$t('message.mobile.scanShowDocument')}}</div>
        </div>
      </div>
      <div class="qcode-box" id="qrcode" ref='qrCode'></div>
      <div class="button-box no-html2canvas">
        <div class="submit-button" @click="saveImage">{{$t('message.mobile.downlaodQRCode')}}</div>
      </div>
    </div>
    <div class="loading-mark" v-show="DownLoading">
      <div class="loadingBox" ref="bodyAnimation"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  nextTick,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import mobileNavbar from './mobileNavbar.vue'
import { getSessionStore,delSessionStore } from '@/utils/store'
import QRCode from 'qrcodejs2-fix'
import { saveAs } from 'file-saver'
import lottie from 'lottie-web'
import loading5Data from './loading5-color-data.json'
import logoPng from '@/assets/images/common/logo.png'
import filePng from '@/views/common/filePng.vue'
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({

})

const currentItem = ref({})
const qCodeImg = ref('')
const DownLoading = ref(false)
const bodyAnimation = ref()
onMounted(()=>{
  init()
})
function init(){
  currentItem.value = getSessionStore({name:'qCodeItem'})
  qrcode(currentItem.value.shareLink)
}
function qrcode(url) {
  $('#qrcode').html("")
  let width = parseFloat(document.documentElement.style.fontSize)*12.5
  let qrcode = new QRCode('qrcode', {
    width: width,
    height: width,
    text: url, // 二维码地址
    colorDark : "#000",
    colorLight : "#fff",
    correctLevel : QRCode.CorrectLevel.L // 这里容错等级只能是L 或者 M
  })
  nextTick(()=>{
    let logo = new Image();
    logo.setAttribute("crossOrigin", "Anonymous");
    logo.src = logoPng
    let logWidth = parseFloat(document.documentElement.style.fontSize)*3
    logo.onload = () => {
        let qrImg = qrcode._el.getElementsByTagName('img')[0];
        let canvas = qrcode._el.getElementsByTagName('canvas')[0];
        qrcode._el.title = "";
        canvas.style.display = "inline-block";
        let ctx = canvas.getContext("2d");
        // 设置logo的大小为二维码图片缩小的3.7倍
        ctx.drawImage(logo, (width - logWidth) / 2, (width - logWidth) / 2, logWidth , logWidth);
        qrImg.src = canvas.toDataURL();
        qrImg.style.display = "none";
        // this.$refs.qrCode.appendChild(qrcode._el);
    }

  //   this.saveImage()
  })
}
function handleBack(val){
  delSessionStore({name:'qCodeItem'})
  router.push(val)
}
function saveImage(){
  DownLoading.value = true
  setTimeout(() => {
    lottie.loadAnimation({
      container: bodyAnimation.value, // the dom element that will contain the animation
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: loading5Data,
      rendererSettings: {
        context:$t('message.text.imageInProgress'), // the canvas context
        scaleMode: 'noScale',
        clearCanvas: false,
        progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
        hideOnTransparent: true
      },
    })
  }, 0);
  setTimeout(()=>{
    html2canvas(document.getElementById('html2canvas'),{
      width:document.getElementById('html2canvas').clientWidth,
      height:parseFloat(document.documentElement.style.fontSize)*22.0625,
      x:0,
      y:(document.getElementById('html2canvas').clientHeight-parseFloat(document.documentElement.style.fontSize)*20)/2,
      allowTaint:false,
      useCORS:true,
      tainttest:true,
      logging:true,
      scale:1.3,
      ignoreElements:(e)=>{
        return e.classList.contains('no-html2canvas')
        // return false
      },
      backgroundColor:'rgb(255,255,255)'
    }).then(canvas=>{
      // this.qCodeImg = canvas.toDataURL('image/png', 0.1)
      new Promise((res)=>{
        canvas.toBlob(blob=>{
          res(blob)
        })
      }).then(res=>{
        saveAs(res,currentItem.value.name+'.png')
        lottie.destroy()
        DownLoading.value = false
      })
    })
  },200)
}
</script>
<style lang="scss" scoped>
.q-code-box{
  .content-box{
    position: relative;
    z-index: 98;
    height: calc(100vh - 3.125rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-3.125rem);
    // pointer-events: none;
    .file-name-info{
      display: flex;
      align-items: center;
      width: 12.5rem;
      .file-icon{
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .75rem;
        .icon{
          width: 1.5rem;
          height: 1.5rem;
        }
      }
      .info{
        .title{
          color: #363b4c;
          font-size: .9375rem;
          @include SourceHanSansCN-Bold;
          width: 10rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .tips{
          color: #6F7588;
          font-size: .875rem;
          @include SourceHanSansCN-Medium;
        }
      }
    }
    .qcode-box{
      margin-top: 1.25rem;
      width: 12.5rem;
      height: 12.5rem;
    }
    .button-box{
      display: flex;
      justify-content: center;
      margin-top: 3rem;
      .submit-button{
        @include SourceHanSansCN-Medium;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 12.5rem;
        height: 2.75rem;
        background: #1E6FFF;
        border-radius: 6px;
        color: #fff;
      }
      /* 跳动动画 */
      @keyframes loading {
        0% { transform: translateY(0); }
        50% { transform: translateY(-0.625rem); }
        100% { transform: translateY(0); }
      }
      .loading-box{
        span{
          display: inline-block;
          animation: loading 1s ease-in-out infinite;
        }
        span:nth-child(2) {
          animation-delay: 0.1s;
        }
        span:nth-child(3) {
          animation-delay: 0.2s;
        }
        span:nth-child(4) {
          animation-delay: 0.3s;
        }
      }
    }
  }
  .img-box{
    position: absolute;
    top: -.125rem;
    left: 0px;
    z-index: 97;
    transform: translateY(-3.125rem);
    img{
      width: 100%;
    }
  }
  .loading-mark{
    top: 0px;
    position: absolute;
    z-index: 98;
    background: rgba(255,255,255,0.7);
    left: 0px;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .loadingBox{
      width: 12.5rem;
    }
  }
}
</style>